/**
 * 股票分析标签页组件
 * 用于展示股票的月度、止损、主力资金分析
 */
<template>
  <div class="analysis-tab">
    <el-tabs v-model="activeTab">
      <el-tab-pane 
        v-for="tab in tabs" 
        :key="tab.name"
        :label="tab.label" 
        :name="tab.name"
      >
        <base-chart 
          :options="getChartOptions(tab.name)"
          height="400px"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BaseChart from '@/components/common/Chart/BaseChart.vue';

export default {
  name: 'AnalysisTab',

  components: {
    BaseChart
  },

  props: {
    // 月度分析数据
    monthlyData: {
      type: Array,
      default: () => [],
      validator: value => Array.isArray(value)
    },
    // 止损分析数据
    stopLossData: {
      type: Array,
      default: () => [],
      validator: value => Array.isArray(value)
    },
    // 主力分析数据
    mainForceData: {
      type: Array,
      default: () => [],
      validator: value => Array.isArray(value)
    }
  },

  data() {
    return {
      activeTab: 'monthly',
      tabs: [
        { name: 'monthly', label: '月度分析' },
        { name: 'stopLoss', label: '止损分析' },
        { name: 'mainForce', label: '主力分析' }
      ]
    };
  },

  methods: {
    /**
     * 获取图表配置
     */
    getChartOptions(type) {
      const dataMap = {
        monthly: this.monthlyData,
        stopLoss: this.stopLossData,
        mainForce: this.mainForceData
      };

      return {
        title: {
          text: this.tabs.find(tab => tab.name === type)?.label
        },
        series: [{
          type: 'line',
          data: dataMap[type]
        }]
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.analysis-tab {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style> 